<template>
  <div class="app-container home">
	<el-row :gutter="20">
		<el-col :span="6"><div class="list version">当前版本：{{ version }}</div></el-col>
		<el-col :span="6">
			<div class="list loginLog">
				<el-divider content-position="left">登录日志</el-divider>
				<div class="items" v-loading="loading">
					<div class="item" v-for="item in logininforList" :key="item.id">
						<div class="name">登录帐号：{{ item.loginName }}</div>
						<div class="time">登录时间：{{ item.loginTime }}</div>
					</div>
				</div>
			</div>
		</el-col>
		<el-col :span="6"><div class="list "></div></el-col>
		<el-col :span="6"><div class="list "></div></el-col>
	</el-row>
	
  </div>
</template>

<script setup name="Index">
import { list } from "@/api/monitor/logininfor";

const logininforList = ref([]);
const version = ref('1.0.0');
const loading = ref(true);

// 查询参数
const queryParams = ref({
  pageNum: 1,
  pageSize: 10
});

/** 查询登录日志列表 */
function getLoginLogList() {
  loading.value = true;
  list(queryParams.value).then(response => {
    logininforList.value = response.data.rows;
    loading.value = false;
  });
}

getLoginLogList();
</script>

<style scoped lang="scss">
.home {
	.list {
		padding: 10px;
		box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.06);
		
		.item {
			padding: 5px 0;
			border-bottom: 1px solid #f0f0f0;
		}
		
		.name {
			font-weight: bold;
		}
		.time {
			font-size: 12px;
			color: #999;
			margin-top: 3px;
		}
	}
}
</style>

